<template>
  <div>
    <el-card class="box-card carone">
      <div class="text item textone">
        <el-button type="primary" @click="onImportExcelClick">{{
          $t("msg.excel.importExcel")
        }}</el-button>
        <el-button type="success" @click="onToExcelClick">{{
          $t("msg.excel.exportExcel")
        }}</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <el-table :data="userList" border style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column prop="username" :label="$t('msg.excel.name')">
          </el-table-column>
          <el-table-column prop="mobile" :label="$t('msg.excel.mobile')">
          </el-table-column>
          <el-table-column prop="address" :label="$t('msg.excel.avatar')">
            <template class="imgbox" slot-scope="scope">
              <div class="user-avatar">
                <el-avatar :size="60" :src="scope.row.avatar"></el-avatar>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('msg.excel.role')">
            <template class="imgbox" slot-scope="scope">
              <div>
                <el-tag
                  size="mini"
                  v-for="item in scope.row.role"
                  :key="item.id"
                  >{{ item.title }}</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" :label="$t('msg.excel.openTime')">
            <template class="imgbox" slot-scope="scope">
              <!-- {{formatter(scope.row.openTime)}} -->
              {{ scope.row.openTime | formatTime }}
              <!-- {{formatter(1433088000000 / 1000)}} -->
            </template>
          </el-table-column>
          <el-table-column prop="address" :label="$t('msg.excel.action')">
            <template class="imgbox" slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click.native="ToUserInfo(scope.row._id)"
                >{{ $t("msg.excel.show") }}</el-button
              >

              <el-button type="info" size="mini" @click="userConf(scope.row)">{{
                $t("msg.excel.showRole")
              }}</el-button>
              <el-button
                type="danger"
                size="mini"
                @click="handleDelete(scope.row)"
                >{{ $t("msg.excel.remove") }}</el-button
              >
              <!-- <el-dialog title="配置角色" :visible.sync="dialogVisible" width="50%">
                <span>这是一段信息</span>
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="超级管理员"></el-checkbox>
                  <el-checkbox label="管理员"></el-checkbox>
                  <el-checkbox label="人事经理"></el-checkbox>
                  <el-checkbox label="销售经理"></el-checkbox>
                  <el-checkbox label="保安队长"></el-checkbox>
                  <el-checkbox label="员工"></el-checkbox>
                </el-checkbox-group>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
              </el-dialog> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <ExportExcel v-model="exportToExcelVisible"></ExportExcel>
    <roles
      :userList="userList"
      @Success="success"
      v-model="dialogVisible"
    ></roles>
  </div>
</template>

<script>
// import moment from "moment"
import dayjs from "dayjs";
import { deleteStaff } from "../../api/staff.js";
import i18n from "../../i18n/index";
import ExportExcel from "./components/Export2Excel";
import roles from "./components/roles";
export default {
  name: "Event1Index",

  data() {
    return {
      pagenum: 1,
      pagesize: 2,
      userList: {},
      total: 0,
      dialogVisible: false,
      checkList: [],
      exportToExcelVisible: false,
    };
  },
  filters: {
    formatTime(val) {
      if (!isNaN(val)) {
        val = parseInt(val);
      }
      return dayjs(val).format("YYYY-MM-DD");
    },
  },
  computed: {
    listData() {
      return this.$store.getters.language;
    },
  },
  components: {
    ExportExcel,
    roles,
  },
  watch: {
    listData(val) {
      this.changeone();
    },
  },
  created() {
    this.getList();
  },

  mounted() {
    // console.log(this.pagesize);
  },

  methods: {
    async getList() {
      let res = await this.userApi.getUserList(this.pagenum, this.pagesize);
      // console.log(res);
      this.userList = res.list;
      this.total = res.total;
    },
    onToExcelClick() {
      this.exportToExcelVisible = true;
    },
    changeone() {
      this.getList();
    },
    handleSizeChange(newsize) {
      this.pagesize = newsize;
      this.getList();
    },

    onImportExcelClick() {
      this.$router.push("/user/import");
    },
    handleCurrentChange(newPage) {
      this.pagenum = newPage;
      this.getList();
    },
    ToUserInfo(i) {
      let id = i;
      this.$router.push({ path: `/user/info/${id}` });
    },
    handleDelete(row) {
      this.$confirm(
        `${i18n.t("msg.excel.dialogTitle1")}${row.username}${i18n.t(
          "msg.excel.dialogTitle2"
        )}`,
        "提示",
        {
          confirmButtonText: i18n.t("msg.universal.confirm"),
          cancelButtonText: i18n.t("msg.universal.cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          let res = await deleteStaff(row._id);
          // console.log(res);
          this.$message({
            type: "success",
            message: i18n.t("msg.excel.removeSuccess"),
          });
          // this.pagenum = 1;
          this.getList();
        })
        .catch(() => {});
    },
    success() {
      this.getList();
    },
    userConf(row) {
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  padding: 0 0 18px 0;
  margin-bottom: 22px;
  .textone {
    box-sizing: inherit;
    float: right;
  }
  // background-color: red;
}
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
